<template>
  <div class="container mult-upload-container">
    <div class="mult-upload-file-box" @click="multUploadListVisible=true">      
      <div
        v-bind="$attrs"
        v-on="$listeners"
        :disabled="disabled"
        class="mult-image-uploader">
        <i class="iconfont df-iconweb-icon- image-uploader-icon"></i>
      </div>
      <img v-if="imageUrl && urlType == 'image'" :src="imageUrl" class="image-viewer" title="点击图片上传">
      <span v-if="imageUrl && urlType != 'image'" class="image-viewer" :class="urlType+'-view'" title="点击图片上传"></span>
      <div class="mult-image-toolbar">
        <div class="mult-image-toolbar-box num">
          {{ uploadFileList.length }}
        </div>
      </div>
    </div>
    <div class="upload-title-box" :title="label || item.lable">
      <el-tooltip class="item" effect="dark" content="必填" placement="top">
        <i class="el-icon-star-on" v-if="required === 1 || item.required" style="color: #F56C6C;"></i>
      </el-tooltip>
      <label for="" :title="label || item.label">{{label || item.label}}</label>
    </div>
    <el-dialog 
      class="mult-dialog-form"
      :title="label"
      width="60%"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :visible.sync="multUploadListVisible"
      append-to-body>
      <div class="mult-el-dialog-body-div">   
        <div v-if="fileType != 'image'" class="mult-look-container" >
          <a :href="file.src" 
            v-for="(file,index) in uploadFileList" 
            :key="index"
            class="image-viewer" 
            :class="fileType+'-view'" 
            title="点击图片下载" 
            download></a>   
        </div>
        <viewer v-else class="mult-look-container" :images="uploadFileUrlList">
           <img
              class="image-viewer"
              v-for="(src,index) in uploadFileUrlList"
              :src="src"
              :key="index"
            >
        </viewer> 
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { matchType } from '@/util/upload';
export default {
  props: {
    item: {
      type: Object,
      required: true
    },
    uploadFilesUrl: String,
    disabled: Boolean,
    value: Array,
    label: String,
    required: Number,
    prop: String
  },
  data() {
    return {
      multUploadListVisible: false,
      multUploadListTitle: '',
      uploadFileList: [],
      fileType: 'image'
    };
  },
  watch: {
    value: {
      deep: true, // 深度监听
      immediate:true,
      handler(val) {
        for (var i = 0; i < val.length; i++) {
          this.$set(val[i], 'type', matchType(val[i].key))
          this.fileType == matchType(val[i].key)
        }
        this.uploadFileList = val
        console.log('multUploadListvalue',val)
      }
    }
  },
  computed: {
    imageUrl () {
      let _url = ''
      
      if(this.uploadFileList.length > 0) {
        _url = this.uploadFileList[0].src
      }
      return _url
    },
    urlType () {
      let _type = ''
      if(this.uploadFileList.length > 0) {
        _type = this.uploadFileList[0].type
      }
      return _type
    },
    uploadFileUrlList () {
      let _arr = []
      this.uploadFileList.forEach((element) => {
        if (element.hasOwnProperty('src') && element.src != "" && element.hasOwnProperty('type') && element.type == 'image') {
          _arr.push(element.src)
        }
      })
      console.log('uploadFileUrlList',_arr)
      return _arr
    }
  },
  methods: {

  }
}
</script>

<style scoped="scoped" lang="scss">
  .columnImg{
    max-width: 100px;
    max-height: 30px;
  }
  .mult-look-container {
    height: 160px;
    .image-viewer {
      width: 240px;
      height: 160px;
      cursor: pointer;
      margin: 0 10px;
      display: inline-block;
    }
  }
  .mult-upload-container{
    height: 200px;
    width: 240px;    
    .mult-upload-file-box {
      position: relative;
      margin: 0 auto;
      width: 95%;
      height: 160px;
      background: rgba(240,240,240,1);
      cursor: pointer;
      .mult-image-uploader {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        text-align: center;
        .image-uploader-icon {
          font-size: 43px;
          color: #8c939d;
          width: 100%;
          height: 160px;
          line-height: 160px;
          text-align: center;
        }
      }
      .image-viewer {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 160px;
        display: block;
        cursor: pointer;
      }
      .no-image-viewer {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 160px;
        line-height: 160px;
        text-align: center;
        background: #f0f0f0;
      }
      .mult-image-toolbar {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 3;
        height: 40px;
        line-height: 40px;
        // background: rgba(255, 255, 255, .2);
        .mult-image-toolbar-box {
          float: right;
          min-width: 32px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          border-radius:2px;
          font-size: 16px;
        }
        .mult-image-toolbar-box.num {
          background: #4285F4;
          color: #fff;
        }
      }
    }
    .upload-title-box {
      margin: 0 auto;
      width: calc(95% - 2px);
      height: 39px;
      line-height: 39px;
      border:1px solid rgba(221,221,221,1);
      border-top: none;
      text-align: center;
      text-overflow:ellipsis; 
      overflow:hidden;
      white-space:nowrap;
    }
    .slide-fade-enter-active {
      transition: all .3s ease;
    }
    .slide-fade-leave-active {
      transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
      transform: translateY(-40px);
      opacity: 0;
    }
  }
</style>
